function init(){

	var tab = [ [{g:1, h:1}, {h:1}, {h:1}, {h:1}	, {h:1}	, {h:1,d:1}	, {h:1}		, {h:1}	, {h:1,d:1}	, {h:1}	, {h:1}		, {h:1}	, {h:1}	, {h:1}		, {h:1} , {h:1,d:1}]
					, [{g:1}	 , {}	, {}	, {}	, {}	, {}		, {}		, {}	, {}		, {d:1}	, {b:1}		, {}	, {}	, {}		, {} 	, {d:1}]
					, [{g:1}	 , {b:1}, {}	, {}	, {}	, {}		, {}		, {}	, {}		, {}	, {}		, {}	, {}	, {g:1}		, {} 	, {d:1}]
					, [{g:1}	 , {g:1}, {}	, {}	, {}	, {}		, {}		, {}	, {}		, {}	, {}		, {d:1}	, {h:1}	, {}		, {} 	, {d:1}]
					, [{g:1}	 , {}	, {}	, {}	, {}	, {}		, {b:1,d:1}	, {}	, {}		, {}	, {}		, {}	, {}	, {}		, {} 	, {d:1,b:1}]
					, [{g:1,b:1} , {}	, {b:1}	, {}	, {}	, {}		, {}		, {d:1}	, {b:1}		, {}	, {}		, {}	, {}	, {b:1}		, {} 	, {d:1}]
					, [{g:1}	 , {}	, {d:1}	, {b:1}	, {}	, {}		, {}		, {}	, {}		, {}	, {}		, {}	, {}	, {d:1}		, {} 	, {d:1}]
					, [{g:1}	 , {}	, {}	, {}	, {}	, {}		, {d:1}		, {h:1}	, {h:1,d:1}	, {}	, {}		, {}	, {}	, {}		, {} 	, {d:1}]
					, [{g:1}	 , {}	, {}	, {}	, {}	, {}		, {d:1}		, {b:1}	, {b:1,d:1}	, {}	, {}		, {}	, {}	, {}		, {} 	, {d:1}]
					, [{g:1}	 , {d:1}, {b:1}	, {}	, {}	, {}		, {}		, {}	, {}		, {}	, {b:1,d:1}	, {}	, {}	, {}		, {} 	, {d:1}]
					, [{g:1}	 , {}	, {d:1}	, {}	, {}	, {}		, {}		, {}	, {}		, {}	, {}		, {}	, {}	, {}		, {} 	, {d:1}]
					, [{g:1}	 , {}	, {}	, {}	, {}	, {}		, {d:1}		, {h:1}	, {}		, {}	, {}		, {}	, {h:1}	, {g:1,b:1}	, {} 	, {d:1}]
					, [{g:1}	 , {}	, {}	, {}	, {}	, {}		, {}		, {}	, {}		, {}	, {}		, {}	, {}	, {}		, {} 	, {d:1}]
					, [{g:1,h:1} , {}	, {}	, {}	, {}	, {}		, {}		, {}	, {d:1}		, {h:1}	, {}		, {}	, {}	, {}		, {} 	, {d:1,h:1}]
					, [{g:1}	 , {}	, {}	, {}	, {}	, {b:1,d:1}	, {}		, {}	, {}		, {}	, {}		, {}	, {}	, {}		, {} 	, {d:1}]
					, [{g:1,b:1}, {b:1}	, {b:1}	, {b:1}	, {b:1}	, {b:1}		, {b:1,d:1}	, {b:1}	, {b:1}		, {b:1}	, {b:1,d:1}	, {b:1}	, {b:1}	, {b:1}		, {b:1} , {d:1,b:1}]
					];
	construireTableau(tab);
	evenementClickCellule();
	afficherRobot("red",1,8);
	gestionRobot();
	gestionCellule();
	
	 
}
function construireTableau(tab){
	var boardHtml = document.getElementById("board");
	for (var i=0; i<=15; i++){
		var row = boardHtml.insertRow(-1);
		for (var j=0 ; j<=15; j++){
			var cell = row.insertCell(-1);
			cell.className = "cellule";
			cell.id = "cell_" + i + "_" + j;
			if(tab[i][j].g==1){
				
				cell.style.borderLeft = "10px solid black";
			}
			if(tab[i][j].d==1){
		
				cell.style.borderRight = "10px solid black";
			}
			if(tab[i][j].h==1){
			
				cell.style.borderTop = "10px solid black";
			}
			if(tab[i][j].b==1){
		
				cell.style.borderBottom = "10px solid black";
			}
		}
	}
}

function evenementClickCellule(){
	var cellules=document.getElementsByTagName('td');
    var i=-1;
    while (cellules[++i]){
    cellules[i].onclick=function(){
    	getCoordonneCellule(this)
    	;};
 
    }
		
}

function getCoordonneCellule(elem){
	var ligne = elem.parentNode.rowIndex; 
	var colonne=elem.cellIndex;
	console.log(ligne +"."+colonne);

}

function afficherRobot(color, row, column){
	var test = 'cell_'+ row + '_' + column;
	var cellule=document.getElementById(test);
	cellule.innerHTML = "<span class='robot'><img id='img_robot_"+color+"' src='../source_serveur/images/robot_"+color+".png' width='100%' /></span>";

}

function gestionCellule(){
	var cellules = document.querySelectorAll('.cellule');
	var i = 0;
	while (i < cellules.length) {
		var cellule = cellules.item(i);
		
		// Drag n drop
		onDragOver(cellule);
		onDrop(cellule);		
		i++;
	
	}
}

function gestionRobot(){
	var robots = document.querySelectorAll('.robot');
	var i = 0;
	while (i < robots.length) {
		var robot = robots.item(i);
		console.log(robot);
		// onClickListener
		robot.addEventListener('click', function(e) {
			var robot = e.currentTarget;
			console.log(e.currentTarget);
			e.stopPropagation();
			robot.style.display = 'list item';
		}, false);
		
		// Drag n drop
		robot.setAttribute('draggable', 'true');
		onDragStart(robot);
		onDragEnd(robot);
		
		i++;
	
	}
}

function onDragStart(node) {
	node.addEventListener('dragstart', function(e) {
		var robot = e.currentTarget;		
		robot.setAttribute('id', 'dragrobot');
		console.log(e.currentTarget);
		e.dataTransfer.setData('robot', robot.id);
	}, false);
}

function onDragEnd(node) {
	node.addEventListener('dragend', function(e) {
		e.preventDefault();
		e.currentTarget.removeAttribute('robot');
	}, false);
}



function onDragOver(node) {
	node.addEventListener('dragover', function(e) {
		e.preventDefault();
	}, false);
}

function onDrop(node) {
	node.addEventListener('drop', function(e) {
		e.preventDefault();
		e.stopPropagation();
		var robot = document.getElementById(e.dataTransfer.getData('robot'));
		e.currentTarget.appendChild(robot);
		getCoordonneCellule(e.currentTarget);
	}, false);
}